<script setup>
    import {ref, reactive, watch, watchEffect } from 'vue';
    /**
     * 数据的监听使用watch和watcheffect方法
     */

    let firstname = ref('尹')
    let lastname = reactive({
        name:'鹏飞',
        prop1:'prop1',
        prop2:'prop2'
    })
    let fullname = ref('')



    // watch函数
    // watch(firstname, (newValue, oldValue) => {
    //     console.log('监听器执行...')
    //     fullname = newValue + lastname.name
    // })

    // watch(() =>  lastname.name, (newValue, oldValue) => {
    //     fullname = firstname.value + newValue
    // })

    // watch(() => lastname, (newValue, oldValue) => {
    //     console.log("深度监听...")
    //     fullname = firstname.value + lastname.name
    // }, {deep:true, immediate:true}) // deep:深度监视，深度监视在进入页面时立即执行一次



    // watcheffect函数
    watchEffect(() => {
        console.log("watcheffect监听器执行...")
        fullname.value = firstname.value + lastname.name
    })
</script>

<template>
    <div>
        姓：<input type="text" v-model="firstname"><br>
        名：<input type="text" v-model="lastname.name"><br>
        姓名:<input type="text" v-model="fullname"><br>
        prop1: <input type="text" v-model="lastname.prop1"><br>
        prop2: <input type="text" v-model="lastname.prop2"><br>



    </div>
    
</template>
  

<style scoped>

</style>
